<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:p="http://primefaces.org/ui">

<ui:include src="/WEB-INF/includes/head.xhtml">
	<ui:param name="pageTitle" value="Trip search" />
</ui:include>
<h:body>
	<ui:include src="/WEB-INF/includes/menu.xhtml" />
	<h1>Trip Search</h1>

	<h:form id="form">

		<!-- Error messages -->
		<p:messages id="messages" closable="true" />

		<p:panelGrid styleClass="noBorders">
			<p:row>
				<p:column rowspan="3">
					<p:selectOneRadio id="options" value="#{tripSearch.radioButtonVal}"
						layout="pageDirection">
						<f:selectItem itemLabel="All trips" itemValue="1" />
						<f:selectItem itemLabel="By time period" itemValue="2" />
						<f:selectItem itemLabel="By duration" itemValue="3" />
						<f:ajax execute="@this"
							render="departureDate arrivalDate duration" />
					</p:selectOneRadio>
				</p:column>
				<p:column colspan="3">
					<p:spacer height="0" />
				</p:column>
				<p:column>
					<h:outputLabel for="stationACombobox" value="Station A" />
				</p:column>
				<p:column>
					<p:selectOneMenu id="stationACombobox"
						requiredMessage="Select station A (departure)"
						value="#{tripSearch.selectedStationA}" required="true">
						<f:selectItem itemLabel="-- Select station A --" itemValue="" />
						<f:selectItems value="#{tripSearch.stations}" var="station"
							itemValue="#{station}" />
					</p:selectOneMenu>
				</p:column>
			</p:row>
			<p:row>
				<p:column>
					<p:calendar id="departureDate"
						disabled="#{tripSearch.radioButtonVal != 2}"
						value="#{tripSearch.departureDate}" pattern="yyyy-MM-dd HH:mm"
						mindate="#{tripSearch.currentDate}">
						<f:ajax event="dateSelect" execute="@this" render="arrivalDate" />
					</p:calendar>
				</p:column>
				<p:column>
					<p:calendar id="arrivalDate"
						disabled="#{tripSearch.radioButtonVal != 2}"
						value="#{tripSearch.arrivalDate}" pattern="yyyy-MM-dd HH:mm"
						mindate="#{tripSearch.departureDate}" />
				</p:column>
				<p:column>
					<p:spacer width="100" height="0" />
				</p:column>
				<p:column>
					<h:outputLabel for="stationBCombobox" value="Station B" />
				</p:column>
				<p:column>
					<p:selectOneMenu id="stationBCombobox"
						requiredMessage="Select station B (arrival)"
						value="#{tripSearch.selectedStationB}" required="true">
						<f:selectItem itemLabel="-- Select station B --" itemValue="" />
						<f:selectItems value="#{tripSearch.stations}" var="station"
							itemValue="#{station}" />
					</p:selectOneMenu>
				</p:column>
			</p:row>
			<p:row>
				<p:column>
					<p:calendar id="duration"
						disabled="#{tripSearch.radioButtonVal != 3}"
						value="#{tripSearch.duration}" pattern="HH:mm" timeOnly="true" />
				</p:column>
				<p:column colspan="3">
					<p:spacer height="0" />
				</p:column>
				<p:column styleClass="alighRightColumnContents">
					<p:commandButton value="Search" icon="ui-icon-search">
						<f:ajax listener="#{tripSearch.search}"
							execute="stationACombobox stationBCombobox departureDate arrivalDate duration"
							update="trips_table" render="trips_table messages" />
					</p:commandButton>
				</p:column>
			</p:row>
			<p:row>
				<p:column>
					<p:spacer height="50" />
				</p:column>
			</p:row>
		</p:panelGrid>

		<!-- Trips table -->
		<p:dataTable id="trips_table" var="trip" value="#{tripSearch.trips}">
			<p:column headerText="Departure from A">
				<h:outputText value="#{trip.departureFromA}" />
			</p:column>
			<p:column headerText="Arrival to B">
				<h:outputText value="#{trip.arrivalToB}" />
			</p:column>
			<p:column headerText="Trip ID">
				<h:outputText value="#{trip.trip}" />
			</p:column>
			<p:column headerText="Route name">
				<h:outputText value="#{trip.routeName}" />
			</p:column>
			<p:column headerText="Time period">
				<h:outputText value="#{trip.duration}" />
			</p:column>
			<p:column headerText="Buy" style="width:4%">
				<p:commandButton id="buyButton" update=":buyTicketForm:display"
					oncomplete="PF('buyTicket').show()" icon="ui-icon-cart" title="Buy">
					<f:setPropertyActionListener target="#{buyTicket.tripID}"
						value="#{trip.trip}" />
				</p:commandButton>
			</p:column>
		</p:dataTable>
	</h:form>

	<ui:include src="/WEB-INF/includes/buy-ticket.xhtml" />
</h:body>
</html>